import { ref } from 'vue'

export const initJianBian = () => {
  //渐变效果
  // const title = ref('导航栏')
  // const navBarColor = ref('#f0f0f0')
  //导航栏的距离
  const distance = ref(0)
  const scrollThreshold = ref(100) // 滚动距离阈值，超过这个距离才显示渐变效果，单位为px，默认 100
  const onScroll = (event: Event & { detail: { scrollTop: number } }) => {
    const scrollTop = event.detail.scrollTop
    const alpha = Math.min(scrollTop / 500, 1) //确保透明度最大为 1
    if (scrollTop >= scrollThreshold.value) {
      // navBarColor.value = '#f0f0f0' // 恢复初始颜色
      coverColor.value = `linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8))` // 恢复初始颜色
      isShow.value = true // 显示标题
      distance.value = 0
    } else {
      //navBarColor.value = `rgba(0, 0, 0, ${alpha})` // 渐变效果
      coverColor.value = `linear-gradient(to bottom,rgba(255,0,0,${alpha}),rgba(0,0,255,${alpha}))`
      isShow.value = false // 隐藏标题
    }
  }
  // 导航栏的标题的显示与隐藏
  const isShow = ref(false)
  // 封面颜色初始化
  const coverColor = ref(
    'linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,0,0,0.8))'
  )
  return {
    onScroll,
    isShow,
    coverColor
  }
}
